<template>
  <div  class="wrap">
    <div class="wrap-box">
      <div class="box">
        <div class="left">
          <img class="imag" :src="item.MerchantImg" alt="" />
        </div>
        <div class="right">
          <div class="top"  @tap="tomerchant(item.MerchantId)"  >
            <span class="name">{{item.MerchantName}}</span>
            <div class="star-box">
              <img class="start" src="../../../static/images/1.png" alt="" />
              <img class="start" src="../../../static/images/1.png" alt="" />
              <img class="start" src="../../../static/images/1.png" alt="" />
              <img class="start" src="../../../static/images/1.png" alt="" />
              <img class="start" src="../../../static/images/2.png" alt="" /><div class="fs">4.5</div>月售1万+</div>
            <span class="peisong">{{item.DeliveryTime}}<div  class="give">{{item.MerchantDelivery}}</div></span>
          </div>
          <div class="bottom" @click="handleClick">
            <div :class="[show ? 'hot' :'']" >
                  <!--<span class="hot-box" v-for="(abc,index) in item.offerH" :key="index">-->
                    <!--<img class="Mj MM" :src="abc.iconH" alt="" /><div>{{abc.dec}}</div>-->
                  <!--</span>-->
              <!--<span class="hot-box" v-for="(bc,index) in item.offerM" :key="index">-->
                    <!--<img class="Mj" :src="bc.iconM" alt="" /><div>{{bc.dec}}</div>-->
                  <!--</span>-->
              <!--<span class="hot-box" v-for="(c,index) in item.offerJ" :key="index">-->
                    <!--<img class="Mj" :src="c.iconJ" alt="" /><div>{{c.dec}}</div>-->
                  <!--</span>-->
            </div>
            <img :class="[show?'san-bu':'san-huan']" class="san" src="../../../static/images/xiasanjiao.png" alt="" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  // import {mapState} from 'vuex'
  export default {
    props: [
      'item',
      'index',
    ],
    data() {
      return {
        show: true,
        detatilData: {},
        ind:'',
        merchant:{},

      }
    },
    methods: {
      handleClick() {
        this.show = !this.show;
      },
      tomerchant(x) {
        // //跳转页面 +传参
        wx.navigateTo({
          url: '/pages/merchant/main?index=' + x
        })
        // wx.reLaunch({
        //   url:'/pages/todetail/main?index='+this.index
        // })
      },


    },


    onLoad() {
      // console.log(this);
      // const that=this;
      // this.show = true;



      // console.log('this.fdex：'+this.fdex);

      // console.log(this.merchant);
      //this.$mp.query.index取代onload 的options
      // console.log(this);
      // this.merchant=this.fdex;
      // this.ind = this.index;
      // console.log('第一页'+':'+this.merchant+'第二页'+':'+this.ind)
      // this.merchant=this.$options.propsData.item.detail;
      // console.log(this.merchant);
      // console.log(this.ind);
      // console.log(this.index)
      //更新数据
      // this.detatilData = this.listTmp[this.$mp.query.index];
      // this.shangjia = this.detatilData.typeDetail;
      // console.log(this.shangjia)
    },
    computed: {
      // ...mapState(['listTmp'])
    },
  }

</script>
<style scoped>
  .wrap{
    width:100%;
    background-color: #fff;
  }
  .wrap-box{
    width:100%;
    margin:0 auto;
    border-bottom:1px solid #cccccc;
  }
  .box{
    margin:auto;
    margin-top:35rpx;
    width:90%;
    margin-bottom:45rpx;
    display: flex;
  }
  .left{
    width:26%;
    height: 100%;
  }
  .right{
    width:70%;

    height: 100%;
    position: relative;
  }
  .imag{
    border-radius:12rpx;

    height: 135rpx;
    width:150rpx;
  }
  .top{
    width:100%;
    display: flex;
    flex-direction: column;

  }
  .start{
    height: 24rpx;
    width:24rpx;
    margin:auto 0;
  }
  .star-box{
    display: flex;
    font-size:22rpx;
    text-align:center;
    line-height:50rpx;
    height: 46rpx;
    color:#cccccc;
  }
  .fs{
    color:#F4EA2E;
  }
  .peisong{
    color:#ccc;
    font-size:24rpx;
    height: 50rpx;
    border-bottom:1px solid #cccccc;
    position: relative;
  }
  .give{
    position: absolute;
    border:1px solid #39B0FF;
    border-radius:3px;
    color:#39B0FF;
    top:0rpx;
    right:0rpx;
    width:102rpx;
    text-align:center;

  }
  .bottom{

  }
  .san{
    position: absolute;
    height: 30rpx;
    width:30rpx;
    top:199rpx;
    right:67rpx;

  }
  .hot-box{
    margin:10rpx;
    display: flex;
    font-size:24rpx ;
    color:#cccccc;
    line-height: 24rpx;
  }
  .Mj{
    height: 30rpx;
    width: 60rpx;
  }
  .hot{
    height: 80rpx;
    overflow: hidden;
  }

  @keyframes bounce-in {
    0% {
      transform:rotate(0deg)
    }
    50% {
      transform:rotate(90deg)
    }
    100% {
      transform:rotate(180deg)
    }
  }
  .san-huan{
    position: absolute;
    height: 30rpx;
    width:30rpx;
    top:156rpx;
    right:5rpx;
    animation: bounce-in .5s;
    transform:rotate(180deg)
  }
  .san-bu{
    position: absolute;
    height: 30rpx;
    width:30rpx;
    top:156rpx;
    right:5rpx;
    transform:rotate(0deg);
    animation: bounce-out .5s
  }
  @keyframes bounce-out {
    0% {
      transform:rotate(180deg)
    }
    50% {
      transform:rotate(90deg)
    }
    100% {
      transform:rotate(0deg)
    }
  }
  .MM{
    width:30rpx;
  }
</style>
